<template>
  <div class="divSection productPage">
    <img class="productBg" src="static/images/resultBg.png">
    <img class="product" src="static/images/product.png">
    <img class="light1" src="static/images/light.png">
    <canvas id="up" class="up"></canvas>
    <div class="gotoBuy" @click="clickToBuy"></div>
    <img src="static/images/hand.png" class="hand">
    <div style="display: none">
      <img id="up1" src="static/images/up/up1.png">
      <img id="up2" src="static/images/up/up2.png">
      <img id="up3" src="static/images/up/up3.png">
      <img id="up4" src="static/images/up/up4.png">
      <img id="up5" src="static/images/up/up5.png">
      <img id="up6" src="static/images/up/up6.png">
      <img id="up7" src="static/images/up/up7.png">
      <img id="up8" src="static/images/up/up8.png">
      <img id="up9" src="static/images/up/up9.png">
      <img id="up10" src="static/images/up/up10.png">
      <img id="up11" src="static/images/up/up11.png">
      <img id="up12" src="static/images/up/up12.png">
      <img id="up13" src="static/images/up/up13.png">
      <img id="up14" src="static/images/up/up14.png">
      <img id="up15" src="static/images/up/up15.png">
      <img id="up16" src="static/images/up/up16.png">
      <img id="up17" src="static/images/up/up17.png">
      <img id="up18" src="static/images/up/up18.png">
      <img id="up19" src="static/images/up/up19.png">
    </div>
  </div>
</template>
<style type="text/css">
  .productPage{
    position: absolute;
    top:0;
    left: 0;
    background-position: bottom center;
    background-size: 100% auto;
  }
  .productBg{
    z-index: 100;
    width: 100%;
    left: 0rem;
    bottom: 0rem;
    position: absolute;
  }
  .product{
    z-index: 100;
    width: 100%;
    left: 0rem;
    bottom: 0rem;
    position: absolute;
  }
  .up{
    position: absolute;
    width: 0.8933rem;
    height: 2.2rem;
    bottom: 11.8rem;
    left: 8rem;
    z-index: 990;
  }
  .gotoBuy{
    position: absolute;
    bottom: 1rem;
    left: 2.4rem;
    width: 5.5rem;
    height: 1rem;
    background-color: #fff;
    opacity: 0;
    z-index: 9999;
  }

  .light1{
   bottom: 1.06em;
   left: 7.4rem;
   width: 0.36rem;
   height: 0.56rem;
   position: absolute;
   z-index: 150;
   animation: lightAction 2s infinite;
   -webkit-animation:lightAction 2s linear infinite;
 }

 .hand{
   bottom: 0.4rem;
   left: 4.7rem;
   width: 0.867rem;
   height: 0.84rem;
   position: absolute;
   z-index: 150;
 }

</style>
<script type="text/javascript">
  export default{
    data(){
      return{
        animationIndex:1,
        intervalId:0
      }
    },
    mounted(){
     //this.intervalId = setInterval(this.upAction,100);
   },
   methods:{
    arrowAction:function(){
      this.intervalId = setInterval(this.upAction,100);
    },
    clickToBuy:function(){
     //clearInterval(this.intervalId);
     console.log("clickToBuy");
     _czc.push(["_trackEvent","weiziSkinTest","click_ToDetails",'','','']);
     // window.location.href = "https://detail.tmall.com/item.htm?spm=a1z10.1-b-s.w5003-16805267414.12.19335493c1Lgm8&id=553819357106&scene=taobao_shop&skuId=3579600395167";
     window.location.href = "https://detail.tmall.com/item.htm?spm=a220z.1000880.0.0.0j9y2H&id=554848978401";
   },
   upAction:function(){
    var image = document.getElementById("up"+this.animationIndex);
    //image.src = "./static/images/up/up"+this.animationIndex+".png";
    //image.crossOrigin = 'Anonymous'; 

    var canvas = document.getElementById("up");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.drawImage(image,0,0,canvas.width,canvas.height);

    this.animationIndex++;
    if(this.animationIndex > 19){
      this.animationIndex = 1;
    }
  }
}
}
</script>